import React, { FC, PropsWithChildren } from 'react';
import { View, ScrollView } from '@tarojs/components';
import { GStyleSheet } from '@/utils/DarkMode';

const dstyle = GStyleSheet.create({
  container: {
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    boxSizing: 'border-box',
    flex: 1,
    overflow: 'hidden',
    height: '100%',
  },
  list: {
    boxSizing: 'border-box',
    paddingTop: 10,
    paddingBottom: 10,
  },
});

interface IProps extends PropsWithChildren {
  id: string;
  style?: React.CSSProperties;
  scrollStyle?: React.CSSProperties;
  onScrollToLower?: () => void;
  containerStyle?: React.CSSProperties;
}

const AreaScrollView: FC<IProps> = ({ id, style, scrollStyle, children, onScrollToLower, containerStyle }) => {
  const styles = dstyle.useDynamicStyle();

  return (
    <View style={{ ...styles.container, ...containerStyle }}>
      <View style={{ boxSizing: 'border-box', height: '100%', ...style }} id={id}>
        <ScrollView
          className='listFlex'
          style={{
            ...styles.list,
            ...scrollStyle,
          }}
          scrollY
          onScrollToLower={onScrollToLower}>
          {children}
        </ScrollView>
      </View>
    </View>
  );
};

export default AreaScrollView;
